<template>
  <div class="equitment">
    <div class="equitment-top">
      <p>设备管理</p>
      <span
        @click="changeState(i)"
        :class="chooseTitle == i ? 'choosed' : ''"
        v-for="(ele, i) in titleState"
        :key="i"
        >{{ ele }}</span
      >
    </div>
    <div class="equitment-bottom">
      <div class="equitment-bottom-operating">
        <el-button v-for="(ele, i) in operat" :key="i" round @click="ele.fun">{{
          ele.name
        }}</el-button>
      </div>
      <CostomTable
        :nameData="nameData"
        :sort="true"
        :operating="operating"
        :operatWidth="operatWidth"
        :tableData="tableData"
        :pagination="pagination"
        :currentChange="currentChange"
      />
    </div>
    <el-dialog :visible.sync="button.dialogVisible" width="30%">
      <div class="myDialog">
        <p class="myDialog-title">{{ button.myDialogTitle }}</p>
        <div class="myDialog-info">
          <div
            class="myDialog-info-template"
            v-for="(ele, i) in button.myDialog"
            :key="i"
          >
            <p class="myDialog-info-template-first">{{ ele.title }}</p>
            <el-input
              v-if="ele.type == 'input'"
              v-model="ele.value"
              :placeholder="'请输入' + ele.title"
            ></el-input>
            <el-date-picker
              v-if="ele.type == 'date'"
              value-format="yyyy年MM月dd日"
              v-model="ele.value"
              type="date"
              :placeholder="'请选择' + ele.title"
            ></el-date-picker>
            <div v-if="ele.type == 'radio'">
              <el-radio
                v-for="(_ele, _i) in ele.valueData"
                :key="_i"
                v-model="ele.value"
                :label="_ele"
                >{{ _ele }}</el-radio
              >
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="button.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="button.confirm">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CostomTable from "@/components/costomTable";
export default {
  data() {
    return {
      titleState: ["全部", "工作中", "空闲", "故障"],
      chooseTitle: 0,
      operat: [
        {
          name: "添加",
          fun: () => {
            this.button.dialogVisible = true;
          },
        },
        { name: "设备升级", fun: () => {} },
        { name: "数据备份", fun: () => {} },
      ],
      nameData: [
        {
          label: "设备信息",
          property: "equitpment",
        },
        {
          label: "状态",
          property: "state",
        },
        {
          label: "信号强度",
          property: "signal",
        },
        {
          label: "电量",
          property: "power",
        },
        {
          label: "当前版本",
          property: "version",
        },
      ],
      tableData: [
        {
          equitpment: "设备名称",
          state: "工作中",
          signal: "90",
          power: "90%",
          version: "V1.0",
        },
      ],
      operatWidth: "240",
      operating: [
        {
          name: "编辑",
          fun: (index) => {
            this.type = 1;
            this.id = this.tableData[index].id;
            this.button.dialogVisible = true;
          },
        },
        {
          name: "删除",
          fun: (index) => {
            this.id = this.tableData[index].id;
            this.$confirm("此操作将该记录, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.axios("post", this.inter.postDeleteDevice + this.id).then(
                (res) => {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                    offset: 300,
                  });
                  this.getData();
                }
              );
            });
          },
        },
        { name: "参数配置", fun: () => {} },
        { name: "数据查询", fun: () => {} },
      ],
      id: -1,
      pageNum: 1,
      type: 0,
      name: "",
      pagination: 1,
      button: {
        dialogVisible: false,
        confirm: () => {
          let next = true;
          this.button.myDialog.some((item) => {
            if (item.value == "") {
              next = false;
              this.$message({
                message: `请输入${item.title}`,
                offset: 300,
              });
              return true;
            }
          });
          if (next) {
            if (this.type == 0) {
              this.axios("post", this.inter.postAddDevice, {
                deviceNo: this.button.myDialog[0].value,
                name: this.button.myDialog[1].value,
                version: this.button.myDialog[2].value,
              }).then((res) => {
                this.button.dialogVisible = false;
                this.getData();
              });
            } else {
              this.axios("post", this.inter.postAmendDevice + this.id, {
                deviceNo: this.button.myDialog[0].value,
                name: this.button.myDialog[1].value,
                version: this.button.myDialog[2].value,
              }).then((res) => {
                this.button.dialogVisible = false;
                this.getData();
              });
            }
            this.type = 0;
          }
        },
        myDialogTitle: "添加",
        myDialog: [
          { type: "input", title: "请输入设备编号: ", value: "" },
          { type: "input", title: "请输入设备名称: ", value: "" },
          { type: "input", title: "请输入设备版本: ", value: "" },
        ],
      },
    };
  },
  components: {
    CostomTable,
  },
  methods: {
    getData() {
      this.axios("get", this.inter.getDevice, {
        pageNum: this.pageNum,
        name: this.name,
        pageSize: 10,
        status: this.chooseTitle == 0 ? null : this.chooseTitle,
      }).then((res) => {
        console.log(res);
        this.pagination = res.total;
        this.tableData = [];
        res.list.filter((item, i) => {
          this.tableData.push({
            equitpment: item.name,
            state: this.titleState[item.status],
            signal: item.signalIntensity,
            power: item.overedNum,
            version: item.version,
            id: item.id,
          });
        });
      });
    },
    currentChange(page) {
      this.pageNum = page;
      this.getData();
    },
    changeState(i) {
      this.chooseTitle = i;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
.equitment {
  .myDialog {
    .dialog-footer {
      .el-button {
        margin-right: 0.2rem;
      }
      margin-top: 0.2rem;
      display: flex;
      flex-direction: row-reverse;
    }
    &-info-template {
      div {
        display: flex;
        width: 80%;
      }
      &-first {
        width: 40%;
        text-align: left;
      }
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      align-items: center;
      padding: 0 0.2rem;
      background: #f5f5f5;
      margin-top: 0.2rem;
    }
    &-title {
      background: #006ab4;
      color: #fff;
      text-align: left;
      padding: 0.1rem 0.2rem;
    }
    background: #f4f4f4;
    padding-bottom: 0.2rem;
    &-info {
      max-height: 60vh;
      overflow-y: scroll;
    }
  }
  &-bottom {
    .el-table {
      height: 60vh;
      overflow-y: scroll;
    }
    &-operating {
      display: flex;
      .el-button {
        background: #cdebff;
        color: #006ab4;
      }
    }

    background: #fff;
    margin: 0 0.1rem;
    padding: 0.2rem;
  }
  &-top {
    .choosed {
      color: #006ab4;
    }
    p {
      font-weight: bold;
    }
    span {
      margin-left: 0.4rem;
      color: #999;
      cursor: pointer;
    }
    padding: 0.2rem;
    display: flex;
    background: #fff;
    margin: 0.1rem;
  }
}
</style>